<template>
	<CategorySelector></CategorySelector>
	<SpuList
		@setShowStatus="changeStatus"
		@getSpuInfo="saveSpuInfo"
		v-if="showStatus === ShowStatus.SPU_LIST"
	></SpuList>
	<SpuForm
		@setShowStatus="changeStatus"
		:currentSpuInfo="currentSpuInfo"
		v-if="showStatus === ShowStatus.SPU_FORM"
	></SpuForm>
	<SkuForm
		@setShowStatus="changeStatus"
		:currentSpuInfo="currentSpuInfo"
		v-if="showStatus === ShowStatus.SKU_FORM"
	></SkuForm>
</template>

<script lang="ts">
export default {
	name: 'SSpu',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import CategorySelector from '@/components/CategorySelector/index.vue'
import SpuList from './components/SpuList.vue'
import SpuForm from './components/SpuForm.vue'
import SkuForm from './components/Skuform.vue'
import { ShowStatus } from './types'

const showStatus = ref(ShowStatus.SPU_LIST)
const currentSpuInfo = ref({})
// 组件切换
const changeStatus = (status) => {
	showStatus.value = status
}
// 接收待编辑的数据
const saveSpuInfo = (spuInfo) => {
	currentSpuInfo.value = {
		...spuInfo,
		spuImageList: [],
		spuSaleAttrList: [],
	}
}
</script>

<style scoped></style>
